<script>
import outMain from "@/components/outMain.vue";
import interviewForm from "@/views/modules/interviewForm.vue";
import bootView from "@/views/modules/bootView.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";
import {
  talentPool,
  CrewhallCollect,
  checkPosition,
  deltalentPool,
  inviteInterview,
  staffQrcode,
  associationPosition,
  talentPoolExcelAll,
  cyLabel,
} from "@/http/api";
export default {
  components: { outMain, interviewForm, bootView },
  name: "",
  data() {
    return {
      showInterview: false,
      showErweima: false,
      interviewId: "",
      showFile: false,
      erweimaImg: "",
      company_type: localStorage.getItem("company_type"),
      rules: {
        enterprise_position_id: [
          {
            required: true,
            message: "请选择需要备选的岗位",
            trigger: "change",
          },
        ],
      },
      tableData: [],
      bootTags: [],
      positionNameArr: [],
      bootTypeArr: [],
      bootTagsArr: [],
      selectWorkArr: [],
      aboutData: {
        enterprise_position_id: "",
      },
      bookLeaveArr: [
        { label: "全部", value: "" },
        { label: "甲一", value: "甲一" },
        { label: "甲二", value: "甲二" },
        { label: "丙一", value: "丙一" },
        { label: "丙二", value: "丙二" },
      ],
      statusArr: [],
      tagArr: [],
      queryData: {
        real_name: "",
        zs: "",
        cblx: "",
        zw: "",
        cy_label: "",
        jg: "",
        remark: "",
        page: 1,
        per_page: 20,
      },
      total: 0,
      showAbout: false,
      viewItem: {},
      maskItem: {},
      headArr: [
        { name: "船员姓名", key: "real_name" },
        { name: "船员年龄", key: "age" },
        { name: "船员职务", key: "zw" },
        { name: "证书等级", key: "zs" },
        { name: "工作经验", key: "gzjy" },
        { name: "船员学历", key: "xl" },
        { name: "船舶类型", key: "cblx" },
        { name: "期望航线", key: "hxyq" },
        { name: "期望月薪", key: "qwyx" },
        { name: "出生地", key: "csd" },
        { name: "手机号", key: "mobile" },
        { name: "身份证号", key: "idcard" },
        { name: "工服尺寸", key: "gfcc" },
        { name: "鞋码", key: "shoe_size" },
        { name: "紧急联系人姓名", key: "jjlxr_name" },
        { name: "紧急联系人电话", key: "jjlxr_mobile" },
        { name: "更新时间", key: "create_time" },
      ],
    };
  },
  props: {},
  setup() {},
  methods: {
    resetFn() {
      this.queryData = {
        enterprise_name: "",
        real_name: "",
        zs: "",
        cblx: "",
        zw: "",
        cy_label: "",
        jg: "",
        remark: "",
        page: 1,
        per_page: 20,
      };
      this.getData();
    },
    showTagsFn(row) {
      if (row.cy_label) {
        row.tags = row.cy_label.split(",");
      } else {
        row.tags = [];
      }
      row.visibleTags = true;
    },
    addItemTags(row, item) {
      if (row.tags.includes(item.name)) {
        row.tags.splice(row.tags.indexOf(item.name), 1);
      } else {
        row.tags.push(item.name);
      }
    },
    async saveTagsFn(row) {
      const { data } = await cyLabel({
        biographical_notes_id: row.biographical_notes_id,
        staff_lable: row.tags.join(","),
      });
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "标记成功",
        });
        this.getData();
        row.visibleTags = false;
      }
    },
    async sureInterview(formData) {
      const { data } = await inviteInterview(formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "邀请成功",
        });
        this.getData();
        this.showInterview = false;
      }
    },
    interviewFn(row) {
      this.interviewId = row.biographical_notes_id;
      this.showInterview = true;
    },
    enterFn(id) {
      this.$router.push({
        path: "/salaSelfEnter",
        query: { id: id, page: id ? this.queryData.page : undefined },
      });
    },
    showAboutFn(row) {
      this.maskItem = row;
      this.showAbout = true;
    },
    async sureAboutFn() {
      const valid = await this.$refs.aboutForm.validate();
      if (!valid) {
        return;
      }
      const { data } = await associationPosition({
        biographical_notes_id: this.maskItem.biographical_notes_id,
        enterprise_position_id: this.aboutData.enterprise_position_id,
      });
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "备选成功",
        });
        this.showAbout = false;
        this.getData();
      }
    },
    collectFn(row) {
      ElMessageBox.confirm("确定收藏选择的船员简历吗?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const { data } = await CrewhallCollect({
          biographical_notes_id: row.biographical_notes_id,
        });
        if (data.code == 1) {
          ElMessage({
            type: "success",
            message: "收藏成功",
          });
          this.getData();
        }
      });
    },
    deleteFn(row) {
      ElMessageBox.confirm("确定删除选择的船员简历吗?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const { data } = await deltalentPool({
          biographical_notes_id: row.biographical_notes_id,
        });
        if (data.code == 1) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          this.getData();
        }
      });
    },
    detailFn(id) {
      this.$router.push({
        path: "/salaPublicDetail",
        query: { id: id, page: this.queryData.page },
      });
    },
    async getWorkData() {
      const { data } = await checkPosition();
      if (data.code == 1) {
        let arr = [];
        if (data.data.length > 0) {
          for (let item of data.data) {
            arr.push({
              label: item.position_name,
              value: item.enterprise_position_id,
            });
          }
        }
        this.selectWorkArr = arr;
      }
    },
    computTag(row) {
      let str = "";
      if (row.cy_label) {
        str = row.cy_label.split(",").length + "个标签";
      } else {
        str = "+创建标签";
      }
      return str;
    },
    async getData() {
      const { data } = await talentPool(this.queryData);
      if (data.code == 1) {
        let arr = data.data.data;
        for (let item of arr) {
          item["visibleTags"] = false;
          item["tags"] = item.cy_label ? item.cy_label.split(",") : [];
        }
        this.tableData = arr;
        this.total = data.data.total;
      }
    },
    async getErweima() {
      const { data } = await staffQrcode();
      if (data.code == 1) {
        this.erweimaImg = data.data;
      }
    },
    downFn(row) {
      this.$router.push({
        path: "/salaExport",
        query: { id: row.biographical_notes_id },
      });
    },
    exportFn() {
      talentPoolExcelAll({}).then((res) => {
        if (res.data.code == 1) {
          let arr = res.data.data;
          for (let item of arr) {
            item.age = item.age + "岁";
            item.gzjy = item.gzjy + "年";
            let dw = item.qwyx_dw == 1 ? "元" : "美元";
            item.qwyx = item.qwyx + dw;
          }
          let headArr = this.headArr.map((item) => {
            return item.name;
          });
          let exportArr = [headArr];
          for (let item of arr) {
            let itemArr = [];
            for (let a of this.headArr) {
              itemArr.push(item[a.key]);
            }
            exportArr.push(itemArr);
          }
          this.exportToExcel(exportArr);
        }
      });
    },
    exportToExcel(data) {
      // 将数据转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(data);

      // 创建工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      // 生成Excel文件
      const excelBuffer = XLSX.write(workbook, {
        bookType: "xlsx",
        type: "array",
      });

      // 使用blob和saveAs下载文件
      const dataBlob = new Blob([excelBuffer], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
      });
      saveAs(dataBlob, "export.xlsx");
    },
    showFileFn(item) {
      this.viewItem = item;
      this.showFile = true;
    },
  },
  mounted() {},
  async created() {
    this.queryData.page = Number(localStorage.getItem("boot_page")) || 1;

    this.getData();
    this.getErweima();
    this.getWorkData();
    let positionNameArr = await this.$getCate.getCateFn(3);
    this.positionNameArr = positionNameArr.map((item) => {
      return { label: item.name, value: item.name };
    });
    let bootTypeArr = await this.$getCate.getCateFn(1);
    this.bootTypeArr = bootTypeArr.map((item) => {
      return { label: item.name, value: item.name };
    });
    this.bootTags = await this.$getCate.getCateFn(5);
    let bootTagsArr = [...this.bootTags];
    this.bootTagsArr = bootTagsArr.map((item) => {
      return { label: item.name, value: item.name };
    });
  },
};
</script>
<template>
  <outMain>
    <div class="tableCont">
      <div class="tableName flexCont">
        <div>企业人才库船员（{{ total }}）</div>
      </div>
      <div class="tableSerch">
        <div class="serchLeft"></div>
        <div class="serchRight">
          <el-form class="flexCenter hasBottom" :inline="true">
            <div class="flexCenter_serch">
              <el-form-item>
                <el-input
                  clearable
                  @clear="getData"
                  @keyup.enter="getData"
                  v-model="queryData.real_name"
                  placeholder="请输入船员姓名"
                />
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="queryData.zs"
                  clearable
                  @change="getData"
                  placeholder="请选择证书"
                >
                  <el-option
                    v-for="item in bookLeaveArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="queryData.cblx"
                  clearable
                  filterable
                  allow-create
                  @change="getData"
                  placeholder="请选择船舶类型"
                >
                  <el-option
                    v-for="item in bootTypeArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="queryData.zw"
                  clearable
                  filterable
                  allow-create
                  @change="getData"
                  placeholder="请选择职务"
                >
                  <el-option
                    v-for="item in positionNameArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  v-model="queryData.cy_labelz"
                  clearable
                  filterable
                  allow-create
                  @change="getData"
                  placeholder="请选择标签"
                >
                  <el-option
                    v-for="item in bootTagsArr"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input
                  clearable
                  @clear="getData"
                  @keyup.enter="getData"
                  v-model="queryData.remark"
                  placeholder="请输入备注"
                />
              </el-form-item>
              <btn
                value="搜索"
                style="margin-right: 15px; margin-top: 0"
                @ok="getData"
              ></btn>
              <btnPlain
                value="重置"
                style="margin-right: 15px; margin-top: 0"
                @ok="resetFn"
              ></btnPlain>
              <btn
                value="录入简历"
                style="margin-right: 15px; margin-top: 0"
                @ok="enterFn"
              ></btn>
              <btnPlain
                style="margin-right: 15px; margin-top: 0"
                value="船员自己录入"
                @click="showErweima = true"
              ></btnPlain>
              <btn
                value="一键导出所有简历"
                v-if="company_type == 1"
                style="margin-right: 15px; margin-top: 0"
                @ok="exportFn"
              ></btn>
            </div>
          </el-form>
        </div>
      </div>
      <el-table class="tableMain" :data="tableData" stripe style="width: 100%">
        <el-table-column
          prop="real_name"
          show-overflow-tooltip
          label="船员姓名"
        >
          <template #default="{ row }">
            <div class="linkText blueText" @click="showFileFn(row)">
              {{ row.real_name }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="age" show-overflow-tooltip label="船员年龄">
          <template #default="{ row }">
            <div v-if="row.age">{{ row.age }}岁</div>
            <div v-if="!row.age">- -</div>
          </template>
        </el-table-column>
        <el-table-column prop="zw" show-overflow-tooltip label="职务名称" />
        <el-table-column show-overflow-tooltip label="证书等级">
          <template #default="{ row }">
            <div v-if="row.zs">{{ row.zs }}</div>
            <div v-if="!row.zs">- -</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="船舶类型">
          <template #default="{ row }">
            <div v-if="row.cblx">{{ row.cblx }}</div>
            <div v-if="!row.cblx">- -</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="工作经验">
          <template #default="{ row }">
            <div v-if="row.gzjy">{{ row.gzjy }}年</div>
            <div v-if="!row.gzjy">- -</div>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="期望月薪">
          <template #default="{ row }">
            <div v-if="row.qwyx && row.qwyx != '0'">
              {{ row.qwyx_dw == 1 ? "¥" : "$" }}{{ row.qwyx }}
            </div>
            <div v-else>- -</div>
          </template>
        </el-table-column>
        <el-table-column label="船员标签">
          <template #default="{ row }">
            <el-popover :visible="row.visibleTags" placement="top" :width="346">
              <div class="tagsCont">
                <div
                  :class="
                    row.tags.includes(item.name) ? 'tagItemActive' : 'tagItem'
                  "
                  :key="index"
                  @click="addItemTags(row, item)"
                  v-for="(item, index) in bootTags"
                >
                  {{ item.name }}
                </div>
              </div>
              <div style="text-align: right; margin: 0">
                <btnPlain
                  style="margin-right: 15px"
                  @ok="row.visibleTags = false"
                  value="取消"
                ></btnPlain>
                <btn value="保存" @ok="saveTagsFn(row)"></btn>
              </div>
              <template #reference>
                <div>
                  <el-tag class="pointText" @click="showTagsFn(row)">
                    {{ computTag(row) }}
                  </el-tag>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="bootTalks"
          show-overflow-tooltip
          label="沟通记录"
        >
          <template #default="{ row }">
            <el-tag type="info" v-if="row.connect_record_count == 0"
              >未沟通</el-tag
            >
            <el-popover v-else placement="right" :width="640" trigger="click">
              <template #reference>
                <el-tag class="linkText"
                  >{{ row.connect_record_count }}次沟通</el-tag
                >
              </template>
              <el-table max-height="400" :data="row.connect_record">
                <el-table-column
                  width="120"
                  property="staff_name"
                  show-overflow-tooltip
                  label="沟通员工"
                />
                <el-table-column
                  width="120"
                  property="connect_label"
                  label="标签"
                  show-overflow-tooltip
                />
                <el-table-column
                  width="200"
                  property="connect_remark"
                  label="沟通备注"
                  show-overflow-tooltip
                />
                <el-table-column
                  width="170"
                  property="create_time"
                  label="沟通时间"
                />
              </el-table>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="Name" width="110" label="操作">
          <template #default="{ row }">
            <div class="tableCtrl">
              <div
                class="greenText ctrlText"
                @click="detailFn(row.biographical_notes_id)"
              >
                详情
              </div>
              <el-popover placement="bottom" :width="60" trigger="hover">
                <template #reference>
                  <div class="blueText ctrlText">更多</div>
                </template>
                <div class="moreText">
                  <div
                    class="blueText ctrlText"
                    v-if="row.is_auth == 1"
                    @click="enterFn(row.biographical_notes_id)"
                  >
                    编辑船员
                  </div>
                  <div
                    class="blueText ctrlText"
                    v-if="row.is_collect_cyjl === 1"
                    @click="collectFn(row)"
                  >
                    收藏船员
                  </div>
                  <div class="blueText ctrlText" @click="interviewFn(row)">
                    邀请面试
                  </div>
                  <div class="blueText ctrlText" @click="showAboutFn(row)">
                    备选岗位
                  </div>
                  <div class="blueText ctrlText" @click="downFn(row)">
                    导出简历
                  </div>
                  <div
                    class="redText ctrlText"
                    v-if="row.is_auth == 1"
                    @click="deleteFn(row)"
                  >
                    删除船员
                  </div>
                </div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageCont">
        <el-pagination
          v-model:currentPage="queryData.page"
          v-model:page-size="queryData.per_page"
          background
          layout="total, prev, pager, next, jumper"
          :total="total"
          @size-change="getData"
          @current-change="getData"
        />
      </div>
      <el-dialog v-model="showAbout" title="备选岗位操作" width="600">
        <div class="dialogMaskCont">
          <el-form :model="aboutData" :rules="rules" ref="aboutForm">
            <el-form-item label-width="120" label="船员姓名">
              {{ maskItem.real_name }}
            </el-form-item>
            <el-form-item
              prop="enterprise_position_id"
              label-width="120"
              label="备选岗位"
            >
              <el-select
                v-model="aboutData.enterprise_position_id"
                placeholder="请选择需要备选的岗位"
              >
                <el-option
                  v-for="item in selectWorkArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showAbout = false">取消</el-button>
            <el-button type="primary" @click="sureAboutFn">
              确认备选
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="showInterview" title="邀请面试" width="600">
        <interviewForm
          @cancel="showInterview = false"
          @ok="sureInterview"
          :interviewId="interviewId"
        ></interviewForm>
      </el-dialog>
      <el-dialog v-model="showErweima" title="操作提示" width="400">
        <div class="payInfoCont">
          <div class="erweimaImg">
            <img :src="erweimaImg" />
          </div>
          <div class="payTip">
            邀请船员使用《鲸领航》微信小程序扫码完善在线简历
            <div>即可录入本企业人才库</div>
          </div>
        </div>
      </el-dialog>
      <el-drawer
        destroy-on-close
        v-model="showFile"
        title="基本信息"
        direction="rtl"
        size="1200px"
      >
        <bootView :viewItem="viewItem"></bootView>
      </el-drawer>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
